<template>
    <el-card shadow="never" class="d-card">
        <template #header>
            <div class="card-header">
                <span>基础表单</span>
            </div>
        </template>
        <el-row>
            <el-col :span="8">
                <el-form
                    ref="ruleFormRef"
                    :model="ruleForm"
                    :rules="rules"
                    label-width="120px"
                    class="demo-ruleForm"
                >
                    <el-form-item label="活动名称" prop="name">
                        <el-input v-model="ruleForm.name" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="活动区域" prop="region">
                        <el-select v-model="ruleForm.region" placeholder="活动区域">
                            <el-option label="Zone one" value="shanghai"></el-option>
                            <el-option label="Zone two" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="活动日期" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                        <el-date-picker
                            v-model="ruleForm.date1"
                            type="date"
                            placeholder="活动日期"
                            style="width: 100%"
                            clearable
                        ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="text-center" :span="2">
                        <div></div>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item prop="date2">
                        <el-time-picker
                            v-model="ruleForm.date2"
                            placeholder="活动时间"
                            style="width: 100%"
                            clearable
                        ></el-time-picker>
                        </el-form-item>
                    </el-col>
                    </el-form-item>
                    <el-form-item label="即时配送" prop="delivery">
                        <el-switch v-model="ruleForm.delivery"></el-switch>
                    </el-form-item>
                    <el-form-item label="活动类型" prop="type">
                        <el-checkbox-group v-model="ruleForm.type">
                            <el-checkbox label="0" name="type">线上活动</el-checkbox>
                            <el-checkbox label="1" name="type">促销活动</el-checkbox>
                            <el-checkbox label="2" name="type">线下活动</el-checkbox>
                            <el-checkbox label="3" name="type">品牌曝光</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="资源" prop="resource">
                    <el-radio-group v-model="ruleForm.resource">
                        <el-radio label="0">线上品牌赞助</el-radio>
                        <el-radio label="1">线下免费场地</el-radio>
                    </el-radio-group>
                    </el-form-item>
                    <el-form-item label="活动形式" prop="desc">
                        <el-input v-model="ruleForm.desc" type="textarea" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">创建</el-button>                        
                        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { ElForm } from 'element-plus'

type FormInstance = InstanceType<typeof ElForm>

const formSize = ref()
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  name: '测试活动',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: ['0'],
  resource: '',
  desc: '',
})

const rules = reactive<any>({
  name: [
    {
      required: true,
      message: '请输入活动名称',
      trigger: 'blur',
    },
    {
      min: 3,
      max: 5,
      message: '活动名称长度为3至5个字',
      trigger: 'blur',
    },
  ],
  region: [
    {
      required: true,
      message: '请选择活动区域',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: '请选择活动日期',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: '请选择活动时间',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: '请选择活动类型',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: '请选择活动资源',
      trigger: 'change',
    },
  ],
  desc: [
    {
      required: true,
      message: '请输入活动形式',
      trigger: 'blur',
    },
  ],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style scoped>

</style>